<template>
  <view class="review-container">
    <view class="history-list">
      <view 
        v-for="(item, index) in historyQuestions" 
        :key="index"
        class="history-item"
      >
        <view class="question-info">
          <view class="question-text">{{ item.characters }}</view>
          <view class="question-meta">
            <text class="difficulty">难度：{{ item.difficulty }}</text>
            <text class="date">{{ item.date }}</text>
          </view>
        </view>
        <view class="actions">
          <button 
            class="review-btn"
            @click="startReview(item)"
          >
            开始复习
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="historyQuestions.length === 0" class="empty-state">
      <text>暂无历史题目记录</text>
      <button 
        class="generate-btn"
        @click="goToGenerate"
      >
        去生成题目
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// Mock 历史题目数据
const historyQuestions = ref([
  {
    id: 1,
    characters: '春眠不觉晓',
    difficulty: '简单',
    date: '2024-03-20',
    audio: 'audio_url_1'
  },
  {
    id: 2,
    characters: '处处闻啼鸟',
    difficulty: '中等',
    date: '2024-03-19',
    audio: 'audio_url_2'
  },
  {
    id: 3,
    characters: '夜来风雨声',
    difficulty: '困难',
    date: '2024-03-18',
    audio: 'audio_url_3'
  }
])

// 开始复习
const startReview = (question) => {
  uni.navigateTo({
    url: '/pages/play/index?mode=review&data=' + encodeURIComponent(JSON.stringify(question))
  })
}

// 跳转到生成页面
const goToGenerate = () => {
  uni.switchTab({
    url: '/pages/generate/index'
  })
}
</script>

<style>
.review-container {
  padding: 20px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.question-info {
  flex: 1;
}

.question-text {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.question-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.actions {
  margin-left: 15px;
}

.review-btn {
  padding: 8px 15px;
  background-color: #3cc51f;
  color: white;
  border-radius: 5px;
  font-size: 14px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #999;
}

.generate-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #3cc51f;
  color: white;
  border-radius: 5px;
}
</style> 